<template>
  <view v-if="storeInfo" class="p-store-info">
    <view class="left" @click="handleToBusiness">
      <view class="logo">
        <x-image v-if="isSaas" :src="storeLogo"/>
        <x-image v-else :src="storeInfo.storeLogo" />
      </view>
      <view class="middle">
        <view class="store-name">{{ storeInfo.storeName || appName }}</view>
        <view class="sale">
          <text>商品数量</text>
          <text style="margin:0 16px 0 2px">{{ numberFormat(storeInfo.productCount) }}</text>
          <text>销量</text>
          <text style="margin:0 16px 0 2px">{{ numberFormat(storeInfo.productSales) }}</text>
        </view>
      </view>
    </view>
    <view v-if="!isSaas">
      <view class="follow" @click="onFocus">
        <x-icon v-if="!storeInfo.focus" name="icon-014" size="30" color="#FFFFFF" style="margin-right: 4px;"/>
        <text v-if="!storeInfo.focus">关注</text>
        <text v-if="storeInfo.focus">已关注</text>
      </view>
      <x-button
        v-if="isOpenApp && storeInfo"
        styles="border: none !important;padding: 0"
        plain
        @click="handleJumpCustomer"
      >
        <view class="wechat">
          <x-icon name="icon-001" size="30" color="#EB441F" style="margin-right: 4px;"/>
          客服
        </view>
      </x-button>
      <x-button
        v-else-if="storeInfo && shareData.replyStatus === 1"
        styles="border: none !important;padding: 0"
        plain
        open-type="contact"
        show-message-card="true"
        :businessId="storeInfo.businessId"
        :sendMessageTitle="shareData.cardKeywords"
        :session-from="sessionFrom"
        :send-message-img="shareData.cardUrl"
      >
        <view class="wechat">
          <x-icon name="icon-001" size="30" color="#EB441F" style="margin-right: 4px;"/>
          客服
        </view>
      </x-button>
      <x-button
        v-else-if="storeInfo"
        styles="border: none !important;padding: 0"
        plain
        open-type="contact"
        :businessId="storeInfo.businessId"
      >
        <view class="wechat">
          <x-icon name="icon-001" size="30" color="#EB441F" style="margin-right: 4px;"/>
          客服
        </view>
      </x-button>
    </view>
  </view>
</template>

<script>
import config from '@/config';
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';
import XButton from '@/components/x-button';

export default {
  name: 'XStoreInfo',
  components: {
    XImage,
    XIcon,
    XButton
  },
  props: {
    storeId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      // 第三方开发平台
      isOpenApp: config.isOpen,
      isSaas: config.project === 'saas',
      storeLogo: config.headImg,
      appName: config.appName,
      storeInfo: null,
      shareData: {},
      sessionFrom: null
    };
  },
  computed: {},
  watch: {},
  created() {
    if (this.storeId) {
      this.getStoreInfo();
    }
  },
  methods: {
    numberFormat(val) {
      return this.$tools.numberFormat(val);
    },
    getStoreInfo() {
      this.$http({
        login: true,
        url: '/account/store/base/info',
        method: 'get',
        data: {
          storeId: this.storeId
        }
      }).then(res => {
        // 如果不是桃红主体的，走商家的客服
        if (res.data?.channelCompanyName !== '杭州桃红网络有限公司') {
          this.isSaas = true;
        }
        this.storeInfo = res.data;
        // 获取客服按钮信息
        this.getConfigData();
      });
    },
    //  获取客服按钮信息
    getConfigData() {
      this.$http({
        url: '/account/consulter/iu/app/detail',
        alarm: true,
        data: {
          storeId: this.storeId
        }
      }).then(res => {
        this.shareData = res.data || {};
        this.sessionFrom = JSON.stringify({
          source: config.appName,
          note: '客服咨询组件',
          id: this.storeId,
          storeName: this.storeInfo.storeName
        });
      });
    },
    //  关注店铺
    onFocus() {
      this.$http({
        login: true,
        url: '/account/store/fans',
        method: 'post',
        data: {
          storeId: this.storeId
        }
      }).then(() => {
        this.getStoreInfo();
      });
    },
    handleToBusiness() {
      if (this.$getCurrentPage().route !== 'packages/store/business') {
        uni.navigateTo({
          url: `/packages/store/business?storeId=${this.storeInfo.storeId}&storeName=${this.storeInfo.storeName}`
        });
      }
    },
    // 联系客服-企业微信
    handleJumpCustomer() {
      const storeInfo = this.storeInfo || {};
      const shareCustomerData = this.shareData || {};
      this.$tools.$formatCustomerServiceChat(storeInfo, shareCustomerData);
    }
  }
};
</script>

<style lang="scss">
  .p-store-info{
    padding: 32px 24px 32px 32px;
    display: flex;
    align-items: center;
    background: #FFFFFF;
    .left{ display: flex; align-items: center; flex: 1;}
    .logo{
      width: 120px;
      height: 120px;
      border-radius: 4px;
      margin-right: 24px;
      background: #FFE4E4;
    }
    .middle{
      height: 120px;
      flex: 1;
      margin-right: 60px;
      .store-name{
        color: $uni-color-default;
        font-size: 32px;
        font-weight: bold;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .rate{
        display: flex;
        color: $uni-color-default;
        font-size: 28px;
        margin-top: 12px;
        margin-bottom: 8px;
      }
      .sale{
        margin-top: 20px;
        font-size: 24px;
        color: $uni-color-secondary;
      }
    }
    .follow{
      width: 140px;
      height: 48px;
      line-height: 48px;
      background: $uni-color-primary;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      border-radius: 24px;
    }
    .wechat{
      margin-top: 16px;
      width: 140px;
      height: 48px;
      line-height: 48px;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      color: $uni-color-primary;
      border: 2px solid $uni-color-primary;
      border-radius: 24px;
    }
  }
</style>
